<template>
    <div class="reserve">
        <pageContainer ref="container">
            <template #button>
                <el-button type="danger" plain @click="del()" class="btn">批量删除</el-button>
            </template>
            <template #table>
                <el-table
                  ref="multipleTableRef"
                  :data="tableData"
                  row-key="id"
                  style="width: 100%"
                  @selection-change="selectChange"
                >
                  <el-table-column type="selection" width="30" />
                  <el-table-column prop="username" label="用户名称" width="90" />
                  <el-table-column prop="courtname" label="球场名称" width="110" />
                  <el-table-column prop="date" label="预约日期" width="100" />
                  <el-table-column prop="time" label="预约时间" width="100" />
                  <el-table-column prop="state" label="预约状态" width="90" />
                  <el-table-column prop="createtime" label="创建时间" width="110" />
                  <el-table-column prop="updatetime" label="状态更新时间" width="110" />
                  <el-table-column  label="操作" width="80">
                        <template #default="scope">
                            <el-button type="danger" :icon="Delete" circle plain @click="del(scope.row,scope.$index)"></el-button>
                        </template>
                  </el-table-column>
                </el-table>
            </template>
        </pageContainer>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import pageContainer from '@/components/page-container/page-container.vue';

import {
  Delete
} from '@element-plus/icons-vue'

const tableData=ref([])
const container=ref()

tableData.value=[
    {id:1,username:'张三',courtname:'1号羽毛球场',date:'2025-9-13',time:'8:00-12:00',state:'待使用',createtime:'2025-9-13 07:12',updatetime:'2025-9-13 08:59'},
    {id:2,username:'张三',courtname:'1号羽毛球场',date:'2025-9-13',time:'8:00-12:00',state:'待使用',createtime:'2025-9-13 07:12',updatetime:'2025-9-13 08:59'},
    {id:3,usernameid:'张三',courtname:'1号羽毛球场',date:'2025-9-13',time:'8:00-12:00',state:'待使用',createtime:'2025-9-13 07:12',updatetime:'2025-9-13 08:59'},
    {id:4,username:'张三',courtname:'1号羽毛球场',date:'2025-9-13',time:'8:00-12:00',state:'待使用',createtime:'2025-9-13 07:12',updatetime:'2025-9-13 08:59'}
]

// 删除球场信息
const del=()=>{
    container.value.open()
}
</script>

<style lang='scss' scoped>
.reserve{
    .btn{
        height: 24px;
        font-size: 13px;
    }
}
</style>